<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">订单编号：</span>
                <el-input placeholder="输入订单编号" v-model.trim="order_sn" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">商品名称：</span>
                <el-input placeholder="输入商品名称" v-model.trim="good_name" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">评价星级：</span>
                <el-select v-model="log_type" clearable placeholder="请选择评价星级">
                    <el-option :label="item.label" :value="item.type" v-for="item in log_arrs" :key="item.type" />
                </el-select>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">评价日期：</span>
                <el-date-picker
                    v-model="area_time"
                    type="daterange"
                    unlink-panels
                    value-format="YYYY-MM-DD"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
            </div>
            <div class="task-one__btn task-wrap-btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
        </div>

        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column label="商品名称" width="280" fixed="left">
                <template #default="{ row }">
                    <div class="table-lr">
                        <el-image class="table-lr__img" loading="lazy" :src="proxy.imgUrl + row.product_img + '!img_400'" fit="cover" v-if="row.product_img" />
                        <div class="table-lr__right">
                            <p class="line-two lr-title">{{ row.product_name }}</p>
                            <p class="lr-text">规格：{{ row.norm }}/{{ row.unit }}</p>
                            <p class="lr-text">等级：{{ row.level }}</p>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="order_sn" label="订单编号" min-width="130"></el-table-column>
            <el-table-column label="评价星级" min-width="90">
                <template #default="{ row }">
                    <span style="color: #4b93fa">{{ row.score }}星</span>
                </template>
            </el-table-column>
            <el-table-column label="供应商信息" min-width="180">
                <template #default="{ row }">
                    <p v-if="row.supplier">{{ row.supplier.title }}[ID:{{ row.supplier.supplier_id }}]</p>
                </template>
            </el-table-column>
            <el-table-column label="评价内容" min-width="260">
                <template #default="{ row }">
                    <el-popover placement="top" :content="row.content" :width="520" trigger="hover">
                        <template #reference>
                            <div class="line-two">{{ row.content }}</div>
                        </template>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="买家" min-width="170">
                <template #default="{ row }">
                    <p>
                        <span v-if="row.user_name">{{ row.user_name }}，</span>UID: {{ row.uid }}
                    </p>
                    <p class="line-one">昵称: {{ row.nickname || '--' }}</p>
                </template>
            </el-table-column>
            <el-table-column prop="created_at_label" label="评价时间" width="160"></el-table-column>
            <el-table-column label="操作" width="164" class-name="operation-nav" fixed="right">
                <template #default="score">
                    <el-button link type="primary" class="theme-btn" @click="clickDetail(score.row)">详情</el-button>
                    <el-button link type="primary" class="theme-btn" @click="clickHidden(score.row, score.$index)">
                        {{ score.row.hidden == 0 ? "隐藏" : "显示" }}
                    </el-button>
                    <el-button link type="primary" class="theme-btn" @click="clickReply(score.row)" v-if="!score.row.reply_id">回复</el-button>
                    <el-popconfirm title="是否确定删除？" confirm-button-text="确定" cancel-button-text="取消" @confirm="clickDel(score.row)">
                        <template #reference>
                            <el-button link type="primary" class="theme-btn">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>

        <!-- 回复 -->
        <el-dialog v-model="dialogReply" title="回复评价" width="720px" :append-to-body="true" :destroy-on-close="true" @close="closeReply">
            <div class="tag-item">
                <div class="tag-item__label">评价内容</div>
                <div class="tag-item__right">{{ evalObj.content }}</div>
            </div>
            <div class="tag-item">
                <div class="tag-item__label">回复内容</div>
                <div class="tag-item__right">
                    <el-input v-model.trim="reason" type="textarea" clearable :rows="4" placeholder="请输入回复内容" />
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :loading="form_loading" @click="confirmPrice">确认回复</el-button>
                    <el-button @click="closeReply">取消</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 详情 -->
        <el-drawer
            title="评价详情"
            v-model="drawerDetail"
            direction="rtl"
            size="560px"
            :append-to-body="true"
            :destroy-on-close="true"
            @close="drawerDetail = false"
        >
            <div class="xq-box">
                <detail-item title="订单编号" :value="objs.order_sn" bottom="18px" />
                <detail-item title="商品名称" :value="objs.product_name" bottom="18px" />
                <detail-item title="商品封面图" bottom="18px">
                    <div class="img-selects">
                        <el-image
                            class="img-selects__pic"
                            :src="proxy.imgUrl + objs.product_img + '!img_400'"
                            :preview-src-list="srcGoodList"
                            fit="cover"
                            v-if="objs.product_img"
                        />
                    </div>
                </detail-item>
                <detail-item title="商品等级" :value="objs.level + '级'" bottom="18px" />
                <detail-item title="商品规格" bottom="18px">
                    <p>{{ objs.norm }}/{{ objs.unit }}</p>
                </detail-item>
                <detail-item title="供应商信息" bottom="18px">
                    <p v-if="objs.supplier">
                        {{ objs.supplier.title }}[ID：{{ objs.supplier.supplier_id }}]，<span>电话：{{ objs.supplier.phone || "无" }}</span>
                    </p>
                </detail-item>
                <detail-item title="用户信息" bottom="18px">
                    <p>
                        <span v-if="objs.user_name">{{ objs.user_name }}</span
                        >{{ objs.nickname }}[UID：{{ objs.uid }}]
                    </p>
                </detail-item>
                <detail-item title="评价星级" :value="objs.score + '星'" bottom="18px" value-color="#4b93fa" />
                <detail-item title="评论显示状态" :value="objs.hidden == 1 ? '隐藏' : '显示'" bottom="18px" value-color="#4b93fa" />
                <detail-item title="评价内容" :value="objs.content" bottom="18px" />
                <detail-item title="回复内容" :value="objs.reply || '暂无'" bottom="18px" />
                <detail-item title="评价时间" :value="objs.created_at_label" bottom="18px" />
                <detail-item title="评价图片" bottom="18px" v-if="objs.comment_photo && objs.comment_photo.length > 0">
                    <div class="img-list">
                        <div class="img-selects" v-for="(item, index) in objs.comment_photo" :key="item.photo_id">
                            <el-image
                                class="img-selects__pic"
                                :src="proxy.imgUrl + item.photo + '!img_400'"
                                :preview-src-list="srcList"
                                :initial-index="index"
                                fit="cover"
                            />
                        </div>
                    </div>
                </detail-item>
            </div>
        </el-drawer>

        <go-back />
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import { Search } from "@element-plus/icons-vue"
import OneLoad from "@mixins/one-load"
import GoBack from "@components/GoBack.vue"
import DetailItem from "@components/DetailItem.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getList()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()

// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        so: good_name.value,
        order_sn: order_sn.value,
        score: log_type.value, // 评分[1:一星,2:二星,3:三星,4:四星,5:五星]
        s_day: area_time.value ? area_time.value[0] : "",
        l_day: area_time.value ? area_time.value[1] : "",
    }
    getdata("order/comment/index", params)
}

// 搜索
const order_sn = ref("")
const good_name = ref("")
const area_time = ref("")
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

// 显示/隐藏
const clickHidden = (item, index) => {
    proxy.$axios
        .post("order/comment/hidden", {
            comment_id: item.comment_id,
            hidden: item.hidden == 0 ? 1 : 0,
        })
        .then((res) => {
            if (res.data.code == 0) {
                proxy.$message({ message: "设置成功", type: "success" })
                arr_data.value[index].hidden = item.hidden == 0 ? 1 : 0
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

/**
 * 回复
 * @param {Boolean} dialogReply 弹窗
 * @param {Boolean} reason 回复内容
 * @param {Function} confirmPrice 提交回复
 */
const evalObj = ref({})
const reason = ref("")
const form_loading = ref(false)
const dialogReply = ref(false)
const clickReply = (item) => {
    evalObj.value = item
    dialogReply.value = true
}
const confirmPrice = () => {
    if (reason.value == "") {
        proxy.$message({ message: "请输入回复内容", type: "warning" })
        return
    }
    form_loading.value = true
    proxy.$axios
        .post("order/comment/reply", {
            comment_id: evalObj.value.comment_id,
            reply: reason.value,
        })
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                proxy.$message({ message: "回复评论成功！", type: "success" })
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}
const closeReply = () => {
    dialogReply.value = false
    form_loading.value = false
    reason.value = ''
}

// 删除
const clickDel = (row) => {
    proxy.$axios
        .post("order/comment/delete", {
            comment_id: row.comment_id,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

/**
 * 详情
 * @param {Object} objs 详情
 * @param {Boolean} drawerDetail 弹窗状态
 * @param {Array} srcList 评价图片预览
 * @param {Array} srcGoodList 商品封面图预览
 */
const objs = ref({})
const srcList = ref([])
const srcGoodList = ref([])
const drawerDetail = ref(false)
const clickDetail = (row) => {
    drawerDetail.value = true
    getDetail(row.comment_id)
}
function getDetail(id) {
    proxy.$axios
        .get("order/comment/detail", {
            params: {
                comment_id: id,
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                result.have_photo == 1 &&
                    result.comment_photo.map((item) => {
                        srcList.value.push(proxy.imgUrl + item.photo)
                    })
                srcGoodList.value.push(proxy.imgUrl + result.product_img)
                objs.value = result
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

// 评价星级
const log_type = ref("")
const log_arrs = ref([
    {
        type: 1,
        label: "一星",
    },
    {
        type: 2,
        label: "二星",
    },
    {
        type: 3,
        label: "三星",
    },
    {
        type: 4,
        label: "四星",
    },
    {
        type: 5,
        label: "五星",
    },
])
</script>
<script>
export default {
    name: "OrderEval",
}
</script>

<style lang="less" scoped>
.tag-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: @margin-md;
    .tag-item__label {
        flex: none;
        text-align: right;
        width: 140px;
        padding-right: @padding-md;
        font-size: @font-size-md;
        color: @gray-8;
    }

    .tag-item__right {
        flex: none;
        width: 500px;
    }
}
</style>
